<template>
	<view class="">
		<!-- uu跑腿   已废弃 -->
		<view class="w-100 paotui" v-if="uu_id">
			<map style="height: 600rpx;" class="w-100 h-100" enable-3D enable-rotate enable-overlooking enable-traffic
				:scale='14' :longitude='longitude' :latitude='latitude' :polyline='polyline' :markers='mapObj'></map>
			<view class="pg-30 border-b d-flex flex-d" style="line-height: 50rpx;">
				<text>配送方式：UU跑腿</text>
				<view class="d-flex">
					<text>UU订单编号：</text>
					<view class="flex-grow1">
						<text class="text-overflow1" style="width: 400rpx;">{{uu_data.origin_id}}</text>
					</view>
					<text class="btn" @tap='coll'>复制</text>
				</view>
				<view class="d-flex-yCenter">
					<image :src="uu_data.driver_photo || 'https://open.uupt.com/images/user_head.png'" mode="aspectFill"
						style="border-radius: 50%; width: 100rpx; height: 100rpx;"></image>
					<text class="ml-20">{{uu_data.driver_name || 'UU跑腿'}}</text>
				</view>
				<view class="">
					联系电话：
					<text class="phen" @tap='make'>{{uu_data.driver_mobile || ''}}</text>
				</view>
				<text>预计送达时间：{{uu_data.expectedarrive_time || ''}}</text>
			</view>
		</view>
		<view class="px-30 pt-30 d-flex flex-w titleBox border-b">
			<view class="item d-flex flex-d">
				<text class="font-30">订单状态</text>
				<text class="font-24 mt-20 icon">{{orderStatus}}</text>
			</view>
			<view class="item d-flex flex-d">
				<text class="font-30">订单编号</text>
				<text class="font-24 mt-20 icon">{{orderData.order_no}}</text>
			</view>
			<view class="item d-flex flex-d">
				<text class="font-30">下单时间</text>
				<text class="font-24 mt-20 icon">{{$tool.time(orderData.addtime*1000)}}</text>
			</view>
			<view class="item d-flex flex-d">
				<text class="font-30">订单金额</text>
				<text class="font-24 mt-20 icon">{{parseInt(orderData.integral_total)}}积分+￥{{orderData.price_total}}</text>
			</view>
		</view>
		<view class="pg-30 border-b mt-30" >
			<template v-if="orderData.status >2">
				<view class="d-flex-yCenter-sb">
					<text class="font-30 font-w">配送状态</text>
					<!-- <text class="" style="color: #D90202;">{{orderStatus}}</text> -->
				</view>
				<view class="my-30 jiandutiao position-r ">
					<text :class="orderClass"></text>
				</view>
				<view class="d-flex-yCenter-sb">
					<text>待付款</text>
					<text>待发货</text>
					<text>配送中</text>
					<text>已完成</text>
				</view>
			</template>
			<view class="mt-60 font-30 mb-30">
				<text>收货地址</text>
				<view class="mt-20 d-flex flex-d">
					<text>{{add}}</text>
				</view>
			</view>
		</view>
		<view class="pg-30 border-b">
			<text>商品信息</text>
			<view class="">
				<navigator :url="'/pages/prot_details/prot_details?cid='+item.goods_id" hover-class="hover-class"
					class="navBox mt-20 d-flex" v-for="(item,index) in orderData.list" :key='index'>
					<view class="">
						<image :src="item.goods_logo" mode="aspectFill"></image>
					</view>
					<view class="d-flex flex-d jfy-sb ml-20 flex-grow1">
						<text class="text-overflow2">{{item.goods_title}}</text>
						<text class="textColor666">{{item.goods_spec}}</text>
						<view class="d-flex-yCenter-sb">
							<text class="font-32 Price-color">{{parseInt(item.integral)}}积分+￥{{item.price_selling}}</text>
							<text class="textColor666">x{{item.number_goods}}</text>
						</view>
					</view>
				</navigator>
			</view>
		</view>
		<view class="pg-30" style="margin-bottom: 140rpx;">
			<!-- <view class="mt-10 d-flex-yCenter-sb">
				<text>小计</text>
				<text class="Price-color">￥{{}}</text>
			</view> -->
			<view class="mt-10 d-flex-yCenter-sb">
				<text>配送费</text>
				<text class="Price-color">￥{{orderData.price_express}}</text>
			</view>
			<!-- <view class="mt-10 d-flex-yCenter-sb">
				<text>优惠金额</text>
				<text class="Price-color">￥{{orderData.price_discount}}</text>
			</view> -->
		</view>
		<view class="px-30 py-20 position-flex-bottom  ">
<!-- 			<navigator url='#' hover-class='none' @tap='quxiaoOrder' class="dele "
				v-if="orderData.pay_state==0 && orderData.status!=0">取消订单</navigator>
			<navigator url='#' hover-class='none' class="add" @tap='order_pay'
				v-if="orderData.pay_state==0 && orderData.status!=0">立即付款</navigator> -->
			<!-- <navigator url='#' hover-class='none' class="add" v-if="orderData.pay_state==1">售后</navigator> -->
		</view>
	</view>
</template>

<script>
	import {
		http_user_integral_order_view,
		http_userorderuu_view,
		http_userorder_cancel
	} from '@/config/apiRouter.js'
	export default {
		data() {
			return {
				order_no: '',
				uu_id: '',
				uu_data: {
					order_code: '',
					driver_name: '',
					driver_mobile: '',
					expectedarrive_time: ''
				},
				latitude: 0,
				longitude: 0,
				mapObj: [],
				polyline: [],
				orderData: {
					order_no: '',
					express_send_no: '',
					addtime: 0,
					price_total: 0,
					price_express: 0,
					price_discount: 0,
					list: []
				}
			}
		},
		computed: {
			goodsSun() {
				let sun = 0
				this.orderData.list.map(item => {
					sun += parseFloat(item.price_real)
				})
				return sun
			},
			add() {
				if (!this.orderData.express_name) return ''
				let item = this.orderData
				let addressData = {
					uname: item.express_name,
					phone: item.express_phone,
					address: '',
				}
				addressData.address += (item.express_province + item.express_city + item.express_area + item
					.express_address)
				let str = ''
				str += addressData.uname + ' '
				str += addressData.phone + ' \n'
				str += addressData.address
				return str
			},
			orderClass() {
				let u = this.orderData
				if (u.status == 0) return 'fukuan'
				if (u.status == 3) return 'daifahuo'
				if (u.status == 4) return 'peishong'
				if (u.status > 4) return 'shongda'
			},
			orderStatus() {
				let e = this.orderData
				if (e.refund_state == 1) {
					return '售后处理中'
				}
				if (e.refund_state == 2) {
					return '已退款'
				}
				if (e.evaluate_state == 1) {
					return '订单已完成'
				}
				if (e.pay_state == 0 && e.status != 0) {
					return '等待用户付款'
				}
				if (e.pay_state == 0 && e.status == 0) {
					return '订单已取消'
				}
				if (e.status == 3) {
					return '待发货'
				}
				if (e.status == 4) {
					return '待收货'
				}
				if (e.status == 5) {
					return '已完成'
				}

				return '异常状态'
			}
		},
		onLoad(opens) {
			this.order_no = opens.order_no
			this.getOrder()
		},
		methods: {
			getOrder() {
				http_user_integral_order_view({
					data: {
						order_no: this.order_no
					}
				}).then(res => {
					this.orderData = res.data
					this.uu_id = res.data.origin_id
					this.uu_id && this.uu_view()
					console.log(res);
				})
			},
			//  付款
			order_pay() {
				this.wxPayment({
					order_no: this.order_no,
					success: res => {
						this.$tool.showToast('支付成功', 1)
						setTimeout(() => {
							this.getOrder()
						}, 1000)
					},
					fail: err => {
						uni.showModal({
							title: '提示',
							content: '支付失败，是否重新支付',
							success: (res) => {
								if (res.confirm) {
									this.order_pay()
								}
							}
						});
					}
				})
			},
			// 取消订单
			quxiaoOrder() {
				http_userorder_cancel({
					data: {
						order_no: this.orderData.order_no
					}
				}).then(res => {
					this.$tool.showToast('取消成功', true)
					setTimeout(() => {
						this.$tool.navigateBack()
					}, 1000)
				})
			},
			// 复制单号
			make() {
				uni.makePhoneCall({
					phoneNumber: this.uu_data.driver_mobile + ''
				})
			},
			// 拨打电话
			coll() {
				console.log('fuz');
				uni.setClipboardData({
					data: this.uu_data.order_code,
					success: () => {
						this.$tool.showToast('复制成功', true)
					},
					fail: () => {
						this.$tool.showToast('复制失败', )
					}
				})
			},
			// 获取uu跑腿信息
			uu_view() {
				http_userorderuu_view({
					data: {
						origin_id: this.uu_id
					}
				}).then(res => {
					res.data.driver_lastloc = '106.269479,29.692003'
					res.data.to_lat = '29.694003'
					res.data.to_lng = '106.279479'
					console.log('uu跑腿', res.data);
					this.uu_data = res.data
					// -----设置两点之间的路线
					// 获取跑男的当前经纬度
					let data = this.uu_data
					let uu_lglt = data.driver_lastloc.split(',')
					let latitude = parseFloat(uu_lglt[1])
					let longitude = parseFloat(uu_lglt[0])
					this.latitude = latitude
					this.longitude = longitude
					this.closeDropdown()

				})
			},
			// 地图信息处理
			closeDropdown() {
				let data = this.uu_data
				let latitude = this.latitude
				let longitude = this.longitude
				const fun = () => {
					let status = parseInt(this.orderData.express_state_local)
					switch (status) {
						case 1:
							return '等待跑男接单'
							break;
						case 3:
							return '跑男已接单'
							break;
						case 4:
							return '已到达取件点'
							break;
						case 5:
							return '已取件'
							break;
						case 6:
							return '到达目的地'
							break;
						case 10:
							return '已送达'
							break;
						case -1:
							return '订单已取消'
							break;
						default:
							return '异常状态'
							break;
					}
				}
				let uu_ = {
					points: [{ // 跑男位置
							latitude,
							longitude
						},
						{ // 目标位置
							latitude: parseFloat(data.to_lat),
							longitude: parseFloat(data.to_lng)
						},
					],
					color: "#FF890B", //线的颜色
					width: 2, //线的宽度
					dottedLine: true, //是否虚线
					arrowLine: true, //带箭头的线 开发者工具暂不支持该属性
				}

				let mapObj = [{ // 骑手位置
						id: 1,
						latitude,
						longitude,
						iconPath: data.driver_photo || 'https://open.uupt.com/images/user_head.png',
						width: 32,
						height: 32,
						callout: {
							content: fun(),
							color: '#000',
							display: 'ALWAYS',
							color: '#fff',
							fontSize: 14,
							padding: 5,
							borderRadius: 5,
							bgColor: "#FF890B"
						}
					},
					{ // 客户位置
						id: 2,
						latitude: parseFloat(data.to_lat),
						longitude: parseFloat(data.to_lng),
						iconPath: '/static/icon/dizi-item.png',
						width: 32,
						height: 32,
						callout: {
							content: '你的位置',
							color: '#000',
							// display: 'ALWAYS',
							color: '#fff',
							fontSize: 14,
							padding: 5,
							borderRadius: 5,
							bgColor: "#FF890B"
						}
					}
				]


				this.latitude = latitude
				this.longitude = longitude
				this.polyline = [uu_]
				this.mapObj = mapObj
				console.log(this.polyline, '11111111111');
				console.log(this.mapObj);
			}
		},

	}
</script>

<style lang="scss">
	.paotui {
		.btn {
			display: inline-block;
			width: 80rpx;
			line-height: 50rpx;
			text-align: center;
			margin-left: 20rpx;
			background: #F5F5F5;
			border: 2rpx solid #C1C1C1;
			border-radius: 12rpx;
		}

		.phen {
			color: #4495F0;
			border-bottom: 1rpx solid #4495F0;
		}
	}

	.titleBox {
		.item {
			width: 50%;
			margin-bottom: 60rpx;
		}

		.icon {
			color: rgba(197, 197, 197, 0.94);
		}
	}

	.navBox {

		image {
			width: 200rpx;
			height: 200rpx;
			border-radius: 12rpx;
		}
	}

	.jiandutiao {
		height: 8rpx;
		background: #E4E4E4;

		text {
			display: inline-block;
			position: absolute;
			left: 0;
			height: 100%;
			background: $color-zt;
			width: 0;
			transition: all 1s;
		}

		.fukuan {
			width: 101rpx;
		}

		.daifahuo {
			width: 35%;
		}

		.peishong {
			width: 65%;
		}

		.shongda {
			width: 100%;
		}
	}

	.position-flex-bottom {
		background: #fff;
		text-align: right;

		navigator {
			display: inline-block;
			width: 330rpx;
			line-height: 80rpx;
			text-align: center;
			border-radius: 12rpx;
			font-size: 32rpx;
			box-sizing: border-box;
		}

		.add {
			margin-left: 30rpx;
			background: $color-zt;
			color: #fff;
		}

		.dele {
			background: #fff;
			border: 1px solid #000;
			color: #000;
		}
	}
</style>
